﻿@{
    ViewData["Title"] = "添加报损";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>添加报损</title>
    <script src="~/libs/jquery/jquery.js"></script>
    <link href="//unpkg.com/layui@2.9.16/dist/css/layui.css" rel="stylesheet">
    <script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>
</head>
<body>
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">报损单号</label>
                <div class="layui-input-inline" style="width: 180px;">
                    <input type="text" name="ReportNumber" autocomplete="off" placeholder="可不填写，自动生成" lay-verify="ReportNumber" class="layui-input" id="ReportNumber">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>制单人</label>
                <div class="layui-input-inline" style="width: 180px;">
                    <input type="text" name="Creator" autocomplete="off" placeholder="请输入制单人" lay-verify="required|Creator" class="layui-input" id="Creator">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>制单时间</label>
                <div class="layui-input-inline" style="width: 180px;">
                    <input type="text" name="CreateDate" id="CreateDate" lay-verify="required|CreateDate" placeholder="请选择制单时间" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>条码类型： </label>
                <div class="layui-input-block" style="width:180px">
                    <select id="DamageType" name="DamageType" lay-filter="aihao" placeholder="请选择" lay-verify="required">
                        <option value="" selected></option>
                        <option value="损坏报损">损坏报损</option>
                        <option value="丢失报损">丢失报损</option>
                        <option value="其他报损">其他报损</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="remark" id="remark"></textarea>
            </div>
        </div>
        <div style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);">
            <button class="layui-btn" lay-submit lay-filter="demo3">保存</button>
            <button class="layui-btn layui-btn-danger" onclick="cancel()">取消</button>
        </div>
    </form>
    <div style="border-bottom: 1px solid black;"><h3 style="text-align:center;">产品信息</h3></div>
    <br />
    <button type="button" class="layui-btn layui-btn-primary layui-bg-blue" id="addData">选择产品</button>
    <button type="button" class="layui-btn layui-btn-warm" id="resetProducts">重置产品</button>
    <table id="dataTable" lay-filter="dataFilter"></table>
    <br />

  @*   <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="//unpkg.com/layui@2.9.17/dist/layui.js"></script> *@
    <script>
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var dropdown = layui.dropdown;
        var util = layui.util;
        function cancel() {
            var index = parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引
            parent.layer.close(index);//再执行关闭
        }
        layui.use(function () {
            // 日期
            laydate.render({
                elem: '#CreateDate',
                value: new Date(),
                type: 'date',
            });

            var currentData = []; // 存储当前选择的产品数据

            document.getElementById('addData').onclick = function () {
                // 弹出新窗口
                layer.open({
                    type: 2, // 弹出层类型，2表示iframe层
                    title: '选择产品',
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    scrollbar: false, // 暂时屏蔽浏览器滚动条
                    skin: 'layui-layer-rim', //加上边框
                    area: ['90%', '90%'], //宽高
                    content: '/QiData/Product', // 弹出层内容，供应商选择页面地址
                    end: function () {
                        // 弹窗关闭后，重新加载表格
                        table.reload('dataTable', {
                            data: currentData
                        });
                    }
                });
            };

            document.getElementById('resetProducts').onclick = function () {
                // 清空表格数据
                currentData = [];
                table.reload('dataTable', {
                    data: currentData
                });
            };

            window.receiveData = function (data) {
                // 更新 currentData，追加新数据或增加相同商品的数量
                currentData = currentData.map(item => {
                    // 查找相同商品
                    const found = data.find(dataItem => dataItem.productCode === item.productCode);
                    if (found) {
                        // 如果找到相同商品，增加数量
                        item.quantity += 1;
                        return item;
                    }
                    return item;
                }).filter(item => item !== null); // 过滤掉null项

                // 追加新数据，确保新数据的数量默认为1
                const newProducts = data.filter(dataItem => !currentData.some(item => item.productCode === dataItem.productCode));
                newProducts.forEach(product => {
                    product.quantity = 1; // 设置数量默认值为1
                    currentData.push(product);
                });

                // 重新渲染表格
                table.reload('dataTable', {
                    data: currentData
                });
            };

            // 渲染表格
            table.render({
                elem: '#dataTable',
                cols: [[ //标题栏
                    { field: 'productCode', title: '产品编号', fixed: 'left' },
                    { field: 'productName', title: '产品名称' },
                    { field: 'productSpecification', title: '规格' },
                    { field: 'category', title: '类别' },
                    { field: 'unit', title: '单位' },
                    { field: 'unitPrice', title: '单价' },
                    { field: 'quantity', title: '数量', edit: 'text', },// 允许编辑数量
                    { title: '操作', templet: '#operationTpl' } // 操作列
                ]],
                data: currentData, // 数据源
            });

            // 监听单元格编辑
            table.on('edit(dataFilter)', function (obj) {
                var value = obj.value; // 得到修改后的值
                var data = obj.data; // 得到当前行所有键值

                // 验证输入值：最小值为1，且为整数
                if (parseInt(value) < 1) {
                    layer.msg('数量必须大于等于1');
                    // 恢复为原来的值
                    obj.update({
                        quantity: data.quantity
                    });
                    return;
                }

                // 确保值为整数
                if (!Number.isInteger(parseInt(value))) {
                    layer.msg('数量必须为整数');
                    // 恢复为原来的值
                    obj.update({
                        quantity: data.quantity
                    });
                    return;
                }

                // 更新 currentData 中的数量
                const index = currentData.findIndex(item => item.productCode === data.productCode);
                if (index !== -1) {
                    currentData[index].quantity = parseInt(value);
                }
            });

            // 监听工具条
            table.on('tool(dataFilter)', function (obj) {
                var data = obj.data; // 获得当前行数据
                if (obj.event === 'del') {
                    layer.confirm('真的删除这条记录么', function (index) {
                        // 从 currentData 中删除当前行数据
                        currentData = currentData.filter(item => item.productCode !== data.productCode || item.specificIdentifier !== data.specificIdentifier);
                        // 重新渲染表格
                        table.reload('dataTable', {
                            data: currentData
                        });
                        layer.close(index);
                    });
                }
            });

            // 表单验证
            form.verify({
                // 入库单编号
                ReportNumber: function (value) {
                    if (value.length > 20) {
                        return '报损单号不能超过20个字符';
                    }
                    // 入库单编号不能包含特殊字符
                    var reg = /[`~!#$%^&*()_+<>?:"{},.\/;'[\]]/im;
                    if (reg.test(value)) {
                        return '报损单号不能包含特殊字符';
                    }
                },
                // 入库单名称
                Creator: function (value) {
                    if (value.length > 20) {
                        return '制单人不能超过20个字符';
                    }
                    // 入库单名称不能包含特殊字符
                    var reg = /[`~!#$%^&*()_+<>?:"{},.\/;'[\]]/im;
                    if (reg.test(value)) {
                        return '制单人不能包含特殊字符';
                    }
                },
                // 入库日期 验证日期格式
                CreateDate: function (value) {
                    if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
                        return '日期格式不正确，应为yyyy-mm-dd';
                    }
                },
            });

            // 表单提交
form.on('submit(demo3)', function (data) {
    var field = data.field; // 获取表单字段值

    // 验证产品信息是否已选择
    if (currentData.length === 0) {
        layer.msg('请先选择产品信息', { icon: 2, time: 2000 });
        return false;
    }

    // 验证数量是否为正整数
    const isValidQuantity = currentData.every(item => {
        const quantity = parseInt(item.quantity, 10);
        return quantity > 0 && Number.isInteger(quantity);
    });

    if (!isValidQuantity) {
        layer.msg('数量必须为正整数', { icon: 2, time: 2000 });
        return false;
    }

    // 不再重新定义 currentData，直接使用全局的 currentData 来获取产品信息
    // 发送到后台的对象构建
    const addDTO = {
        ReportNumber: field.ReportNumber,
        Creator: field.Creator,
        CreateDate: field.CreateDate,
        DamageType: field.DamageType,
        Remark: field.remark,
        Details: currentData.map(item => ({
            ProductCode: item.productCode,
            Quantity: item.quantity,
            BatchNumber: item.batchNumber,
            UnitPrice: item.unitPrice,
            Unit: item.unit,
            ProductName: item.productName,
            ProductSpecification: item.productSpecification,
            Category: item.category,
            StorageUnit: item.storageUnit,
            Id: item.id,
        }))
    };

    console.log(addDTO);
    // 发送 AJAX 请求到后台
    $.get("/QiData/CreateLossReporting", addDTO, function (response) {
        if (response) {
            layer.msg('保存成功', { icon: 1, time: 2000 }, function () {
                // 关闭弹窗
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });
        } else {
            layer.msg('保存失败: ' + response.message, { icon: 2, time: 2000 });
        }
    });

    return false; // 防止默认表单提交
});
        });
    </script>
    <script type="text/html" id="operationTpl">
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
    </script>
</body>
</html>
